<script setup lang="ts">
import { ref } from 'vue';
import { useFetch } from '@/home/hooks/fetch';
import type { HotUser } from './hot';
import LoadingBox from '@/home/components/LoadingBox.vue';
import Loading from '@/home/components/Loading.vue';
import CustomAvatar from '@/home/components/CustomAvatar.vue';

const props = defineProps<HotUser>();
const emit = defineEmits(['change-follow']);
const { $fetch } = useFetch();

const loading = ref(false);
const changeFocus = async (userId: string, isFocus: boolean) => {
  loading.value = true;

  const { isSuccess } = await $fetch(isFocus ? '/user/cancel' : '/user/focus', {
    autoGotoLogin: true,
    data: { userId },
  });

  if (isSuccess) {
    console.log('success');
  } else {
    console.log('fail');
  }

  loading.value = false;
};
const handleClick = async () => {
  await changeFocus(props.userId, props.isFocus);
  emit('change-follow');
};
</script>

<template>
  <div class="h-52 flex justify-between">
    <div class="flex gap-16">
      <a :href="props.jump" target="_blank">
        <CustomAvatar :photo="props.photo" :title="props.nickname" :module="['rounded-inherit']" class="size-52 border border-[#ffffff] rounded-50% border-solid shadow-[0_0_0_1px_#e3e3e3]" />
      </a>
      <div class="max-w-204 flex-col justify-between">
        <div class="flex">
          <a :href="props.jump" target="_blank">
            <h3 class="max-w-full truncate text-16 c-hex-292929 font-500 leading-28 hover:underline">
              {{ props.nickname }}
            </h3>
          </a>
        </div>
        <p class="max-w-full truncate text-14 c-hex-575757 leading-22">
          {{ props.description ?? props.profile }}
        </p>
      </div>
    </div>
    <button
      @click="handleClick"
      :disabled="loading"
      v-if="!props.focusButtonDisabled"
      :class="[
        'mb-auto mt-auto h-36 w-72 border border-[#E3E3E3] rounded-18 border-solid bg-transparent text-center text-12 font-500 leading-16 transition-all',
        loading ? '' : 'hover:border-[#292929]'
      ]"
    >
      <LoadingBox :loading="loading">
        <template #default>
          <!-- TODO: I18N -->
          {{ props.isFocus ? $t('home.hot.followed') : $t('home.hot.follow') }}
        </template>
        <template #loading>
          <div class="flex-center">
            <Loading class="size-16 color-hex-8b8b8b" />
          </div>
        </template>
      </LoadingBox>
    </button>
  </div>
</template>

<style lang="scss" scoped>
</style>
